<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.深度监视</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>姓名：{{name}}</h2>
      <h2>性别：{{gender}}</h2>
      <h2>年龄：{{age}}</h2>
      <button @click="changeName">改名字</button>
      <button @click="changeGender">改性别</button>
      <button @click="changeA1">改对外年龄</button>
      <button @click="changeA2">改真实年龄</button>
      <button @click="changeAge">改整个年龄</button>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          name:'xiao-high',
          gender:'女',
          age:{
            a1:29,
            a2:60
          }
        },
        methods:{
          changeName(){
            this.name = 'yi-cuo-zai-cuo'
          },
          changeGender(){
            this.gender = '未知'
          },
          changeA1(){
            this.age.a1 += 1
          },
          changeA2(){
            this.age.a2 += 10
          },
          changeAge(){
            this.age = {
              a1:8,
              a2:99999999
            }
          }
        },
        watch:{
          // 默认情况下，监视的是age的地址值；若开启深度监视，那么监视的就是：地址值+内部属性
          age:{
            deep:true,
            handler(){
              console.log('age变化了')
            }
          }
        }
      })
    </script>
  </body>
</html>